<template>
  <div id="operStatisticsNetwork" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/statisticsNetwork">入网统计</BreadcrumbItem>
			</Breadcrumb>
		</div>
    <TableSearch>
      <Form :label-width="50">
        <Row :gutter="16">
          <Col :md="16">
            <Row>
              <Col :md="8" style="padding:0;">
                <FormItem label="年">
                  <DatePicker v-model="searchForm.year" type="year" @on-change="yearChange" :clearable="false" :editable="false" :options="yearOption" placeholder="请选择"></DatePicker>
                </FormItem>
              </Col>
              <Col :md="8" style="padding:0;">
                <FormItem label="月">
                  <Select v-model="searchForm.month" @on-change="monthChange" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in months" :value="v" :key="`search-month-option-${i}`">{{`${v}月`}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :md="8" style="padding:0;">
                <FormItem label="日">
                  <Select v-model="searchForm.date" not-found-text="请先选择月份" placeholder="请选择" clearable>
                    <Option v-for="(v,i) in days" :value="v" :key="`search-day-option-${i}`">{{`${v}日`}}</Option>
                    <ul v-if="!days.length" class="ivu-select-not-found"><li>请先选择月份</li></ul>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>统计日期</th>
						<th>新增用户数</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.newUserList" :key="`newUserNumber-list-key-${i}`">
							<td>{{v.date}}</td>
							<td>{{v.newUserNumber}}</td>
						</tr>
            <tr v-if="!isLoading && pageData.newUserList <= 0">
              <td colspan="2">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

  </div>
</template>
<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'

  export default {
    data(){
      return {
        searchForm:{
          year:moment([moment().year()]).toDate(),
          month:null,
          date:null
        },
        submitForm:{},
        yearOption:{
          disabledDate:(d) => {
            return moment(d).year() > moment().year();
          }
        }
      };
    },
    computed:{
      ...mapState('operation/operStatisticsNetwork',['pageData','isLoading']),
      months(){
        let isCurYear = moment(this.searchForm.year).year() === moment().year();
        let month = isCurYear ? moment().month() + 1 : 12;
        let monthlist = [];
        for (let i = 1; i <= month; i++){
          monthlist.push(i);
        }
        return monthlist;
      },
      days(){
        if (!this.searchForm.month) return [];
        let m = moment(`${moment(this.searchForm.year).format('YYYY')}-${this.searchForm.month}-01`,'YYYY-M-DD');
        let cur = moment(`${moment().format('YYYY-MM')}-01`);
        let isCurMonth = m.format('YYYY-MM') === cur.format('YYYY-MM');
        let monthDay = isCurMonth ? moment().date() - 1 : m.daysInMonth();
        let daylist = [];
        for (let i = 1; i <= monthDay; i++){
          daylist.push(i);
        }
        return daylist;
      }
    },
    methods:{
      moment,
      ...mapActions('operation/operStatisticsNetwork',['reload']),
      yearChange(v){
        let i = this.months.findIndex(o => o === this.searchForm.month);
        if (i < 0) {
          this.searchForm.month = null;
        }
        this.monthChange(this.searchForm.month);
      },
      monthChange(v){
        let i = this.days.findIndex(o => o === this.searchForm.day);
        if (i < 0) {
          this.searchForm.day = null;
        }
      },
      search(){
        this.submitForm.date = this.searchForm.year.getFullYear();
        this.submitForm.type = 3;
        if(this.searchForm.month){
          this.submitForm.date = moment([this.searchForm.year.getFullYear(),this.searchForm.month-1]).format('YYYY-MM');
          this.submitForm.type = 2;
        }
        if(this.searchForm.date){
          this.submitForm.date = moment([this.searchForm.year.getFullYear(),this.searchForm.month-1,this.searchForm.date]).format('YYYY-MM-DD');
          this.submitForm.type = 1;
        }
        this.reload({...this.submitForm});
      }
    },
    mounted(){
      this.submitForm.date = this.searchForm.year.getFullYear();
      this.submitForm.type = 3;
      this.reload({...this.submitForm});
    },
    filters:{
      isNull(v){
        return v === null ? '--' : v;
      }
    }
  }
</script>
<!--
<script>
	import {mapState,mapActions} from 'vuex'

  export default {
    components:{

    },
    data(){
      return {
        current:1,
        type:'',
        date:'',
        submitForm:{}
      }
    },
    computed:{
      ...mapState('operation/operStatisticsNetwork',['pageData','isLoading']),
      empopts(){
        return {isedit:this.modalIsEdit,title:this.modalTitle};
      }
    },
    methods:{
      ...mapActions('operation/operStatisticsNetwork',['reload']),
      search(){
        this.submitForm = {type:this.type=2,date:this.date='2018-07'};
        this.loadPage(1);
      },
      loadPage(e){
        this.current = e;
        this.reload({pageNum:this.current,...this.submitForm});
      }
    }
  };
</script> -->
